import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector } from 'react-redux';
import dayjs from 'dayjs';

import './index.scss';

import ContentWrapper from '../../../components/ContentWrapper';
import useFetch from '../../../hooks/useFetch';
import Genres from '../../../components/Genres';
import CircleRating from '../../../components/CircleRating';
import Img from '../../../components/LazyLoadImg';
import PosterFallback from '../../../assets/no-poster.png';
import { useAppSelector } from '../../../store/hook';
import { PlayIcon } from '../Playbtn';
import VideoPopup from '../../../components/VideoPopup';

const DetailsBanner = ({ video, crew }: any) => {
  const [show, setShow] = useState(false);
  const [videoId, setVideoId] = useState<any>(null);

  const { id, mediaType } = useParams();
  const { data, loading } = useFetch(`/${mediaType}/${id}`);
  const { url } = useAppSelector(state => state.home);

  const _genres = data?.genres?.map((g: any) => g.id);
  const director = crew?.filter((f: any) => f.job === 'Director');
  const writer = crew?.filter(
    (f: any) => f.job === 'Screenplay' || f.job === 'Story' || f.job === 'Writer'
  );

  const toHoursAndMinutes = (totalMinutes: number) => {
    const hours = Math.floor(totalMinutes / 60);
    const minutes = totalMinutes % 60;
    return `${hours}h${minutes > 0 ? ` ${minutes}m` : ''}`;
  };

  return (
    <div className="detailsBanner">
      {!loading ? (
        <>
          {!!data && (
            <React.Fragment>
              <div className="backdrop-img">
                <Img src={url.backdrop + data.backdrop_path}></Img>
              </div>
              <div className="opacity-layer"></div>
              <ContentWrapper>
                <div className="content">
                  <div className="left">
                    {data.poster_path ? (
                      <Img className="posterImg" src={url.backdrop + data.poster_path}></Img>
                    ) : (
                      <Img className="posterImg" src={PosterFallback}></Img>
                    )}
                  </div>
                  <div className="right">
                    <div className="title">{`${data.name || data.title} (${dayjs(
                      data.release_date
                    ).format('YYYY')})`}</div>
                    <div className="subtitle">{data.tagline}</div>
                    <Genres data={_genres}></Genres>
                    <div className="row">
                      <CircleRating rating={data.vote_average.toFixed(1)}></CircleRating>
                      <div
                        className="playbtn"
                        onClick={() => {
                          setShow(true);
                          setVideoId(video?.key);
                        }}
                      >
                        <PlayIcon></PlayIcon>
                        <span className="text">在线观看</span>
                      </div>
                    </div>
                    <div className="overview">
                      <div className="heading">简介</div>
                      <div className="description">{data.overview}</div>
                    </div>
                    <div className="info">
                      {data.status && (
                        <div className="infoItem">
                          <div className="text bold">状态:</div>
                          <span className="text">
                            {data.status === 'Released' ? '上线' : '未上线'}
                          </span>
                        </div>
                      )}
                      {data.release_date && (
                        <div className="infoItem">
                          <div className="text bold">发布时间:</div>
                          <span className="text">{data.release_date}</span>
                        </div>
                      )}
                      {data.runtime && (
                        <div className="infoItem">
                          <div className="text bold">时长:</div>
                          <span className="text">{data.runtime}分钟</span>
                        </div>
                      )}
                    </div>

                    {director?.length > 0 && (
                      <div className="info">
                        <div className="text bold">导演:</div>
                        <span className="text">
                          {director.map((item: any, index: any) => {
                            return (
                              <span key={index}>
                                {item.name}
                                {director.length - 1 !== index && ', '}
                              </span>
                            );
                          })}
                        </span>
                      </div>
                    )}

                    {writer?.length > 0 && (
                      <div className="info">
                        <div className="text bold">编剧:</div>
                        <span className="text">
                          {writer.map((item: any, index: any) => {
                            return (
                              <span key={index}>
                                {item.name}
                                {writer.length - 1 !== index && ', '}
                              </span>
                            );
                          })}
                        </span>
                      </div>
                    )}

                    {data?.created_by?.length > 0 && (
                      <div className="info">
                        <div className="text bold">其他:</div>
                        <span className="text">
                          {data?.created_by?.map((item: any, index: any) => {
                            return (
                              <span key={index}>
                                {item.name}
                                {data?.created_by?.length - 1 !== index && ', '}
                              </span>
                            );
                          })}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
                <VideoPopup
                  show={show}
                  setShow={setShow}
                  videoId={videoId}
                  setVideoId={setVideoId}
                ></VideoPopup>
              </ContentWrapper>
            </React.Fragment>
          )}
        </>
      ) : (
        <div className="detailsBannerSkeleton">
          <ContentWrapper>
            <div className="left skeleton"></div>
            <div className="right">
              <div className="row skeleton"></div>
              <div className="row skeleton"></div>
              <div className="row skeleton"></div>
              <div className="row skeleton"></div>
              <div className="row skeleton"></div>
              <div className="row skeleton"></div>
              <div className="row skeleton"></div>
            </div>
          </ContentWrapper>
        </div>
      )}
    </div>
  );
};

export default DetailsBanner;
